<template>
  <div class="address-container">
    <div class="right-button">
      <el-button type="primary" size="small" @click="addAddress">新增地址</el-button>
    </div>
    <el-tabs  type="card" v-model="addressType">
      <el-tab-pane label="国内地址" name="1"></el-tab-pane>
      <el-tab-pane label="国外地址" name="2"></el-tab-pane>
    </el-tabs>
    <Table :columns="columns[addressType]" :tableData="tableData">
      <template #operator="{row}">
        <el-button type="text" @click="edit(row)">修改</el-button>
        <el-button type="text" @click="del(row.id)">删除</el-button>
      </template>
    </Table>
    <AddressEdit
        :address-item="editItem"
        :is-visible.sync="showEdit"
        :region-type="addressType"
        @confirm="getTable"></AddressEdit>
  </div>
</template>

<script lang="ts">
import {Component} from "vue-property-decorator";
import {mixins} from "vue-class-component";
import Page from "@/common/mixins";
import AddressEdit from "@/components/AddressEdit.vue";
import {deepClone} from "@/utils";
@Component({
  components: {AddressEdit}
})
export default class Address extends mixins(Page){
  private columns = {
    '1':[
      {label: '收件人',key: 'name'},
      {label: '电话',key: 'phone'},
      {label: '省市区',key: 'city'},
      {label: '详细地址',key: 'address'},
      {label: '邮编',key: 'postCode'},
      {label: '操作',key:'operator',slot:true}
    ],
    '2':[
      {label: 'Name',key: 'name'},
      {label: 'Phone',key: 'phone'},
      {label: 'Address',key: 'address'},
      {label: 'City',key: 'city'},
      {label: 'Postcode',key: 'postCode'},
      {label: 'Country',key: 'country'},
      {label: '操作',key:'operator',slot:true}
    ]
  }
  private addressType = '1'
  private addressObj = {
    1:[
      {id:1,isDefault:true,name:'name1', phone:'12345', address:'国内地址1', postCode:'518020', city:'巴塞罗那', country:'巴西'},
      {id:2,isDefault:false,name:'name2', phone:'34567', address:'国内地址2', postCode:'518030', city:'巴塞罗那', country:'巴西'},
      {id:3,isDefault:false,name:'name3', phone:'45678', address:'国内地址3', postCode:'518040', city:'巴塞罗那', country:'巴西'},
    ],
    2:[
      {id:4,isDefault:false,name:'name4', phone:'45678', address:'国外地址1', postCode:'518040', city:'巴塞罗那', country:'巴西'},
    ]
  }
  private editItem = {}
  private showEdit = false

  get tableData(){
    return this.addressObj[this.addressType]
  }

  created(){
    this.getTable()
  }

  // 获取收获地址
  getTable(){
    this.$api.address.addressListApi().then(({data})=>{
      this.addressObj = data
    })
  }

  // 新增地址
  addAddress(){
    this.editItem = {};
    this.showEdit = true;
  }

  // 修改地址
  edit(item){
    this.editItem = deepClone(item);
    this.showEdit = true;
  }

  // 删除地址
  del(id){
    this.$api.address.delAddressApi(id).then(res=>{
      this.$message.success('删除成功');
      this.getTable()
    })
  }
}
</script>

<style scoped lang="scss">
.address-container{
  position: relative;
  .right-button{
    position: absolute;
    right: 20px;
    top: 5px;
    cursor: pointer;
    z-index: 2;
  }
}

</style>